<template >
    <div class="top">
        <div @click="changeDark" class="icon">
            <el-icon size="30" v-if="dark"><MoonNight /> </el-icon>
            <el-icon size="30" v-if="!dark"> <Sunny /> </el-icon>
        </div>
        <div>
            <el-button class="buttom" mb-2 @click="toggle">{{ language }}</el-button>
            <el-dropdown placement="bottom">
            <el-button class="buttom"> {{ $t('indexView.fontChoose') }} </el-button>
            <template #dropdown>
                <el-dropdown-menu>
                    <el-dropdown-item @click="modifyFont('youyuan, sans-serif')">{{ $t('indexView.youyuan') }}</el-dropdown-item>
                    <el-dropdown-item @click="modifyFont('cute, sans-serif')">{{ $t('indexView.cute') }}</el-dropdown-item>
                
                    <el-dropdown-item @click="modifyFont('pinyin, sans-serif')">{{ $t('indexView.pinyin') }}</el-dropdown-item>
                    <el-dropdown-item @click="modifyFont('rosyClouds, sans-serif')">{{ $t('indexView.rosyClouds') }}</el-dropdown-item>
                </el-dropdown-menu>
            </template>
        </el-dropdown>
        </div>
    </div>

    <div style="float: left;margin-top: 11%;margin-left: 10%; width: 30%;"><describeView/></div>
    <div style="margin-top: -30px;"><loginInputView :isdark="dark"/></div>
    
</template>

<script setup lang="ts">
import useLanguage from '@/hooks/useLanguage';
import useDark from '@/hooks/useDark';
import describeView from './son/describeView.vue';
import loginInputView from './son/loginInputView.vue';


const { language,toggle,modifyFont } = useLanguage();
const { dark, changeDark } = useDark();
</script> 


<style scoped>
.top {
    display: flex;
    gap: 1%;
}
.icon {
    margin-top: 16px;
    margin-left: 15px;
    float: left;
    cursor: pointer;
        /* 改变鼠标指针样式 */
    transition: color 0.3s ease;
}
.buttom{
    font-family: inherit;
    width: 90px; 
    height: 40px; 
    margin-top: 10px; 
    margin-left: 5px; 
}

.icon:hover {
    color: lightcoral;
}
</style>